<template>
	<view :style="$theme.pageStyle">
		<view class="w96 radius20 bgwhite" style="margin-top: 20rpx;">
			<view class="w96 flex-between" style="border-bottom: 2rpx solid #eee;padding: 20rpx 0rpx;">
				<view style="font-size: 26rpx;">
					<label style="font-size: 15px;font-weight: bold;">订单号：</label>
					<label style="color:#999;">{{Order.sn}}</label>
				</view>
				<label style="color:#2d80fd" v-if="Order.status === 2" >购买成功</label>
				<label style="color:red" v-else>已取消</label>
			</view>
			<view class="w96" style="padding:20rpx 0rpx;">
				<view class="flex-start" style="width:100%;">
					<view>
						<image :src="lawyer.avatar" style="width:80px;height: 80px;border-radius: 10rpx;"></image>
					</view>
					<view style="margin-left: 20rpx;width:70%;">
						<view style="font-weight: bold;font-size: 32rpx;">{{lawyer.real_name}}</view>
						<view style="font-size: 26rpx;color:#999;margin-top: 20rpx;">购买时长：{{Order.time}} 天</view>
					</view>
				</view>
			</view>
			<view class="w96 flex-end items-center">
				<view style="margin-left: 20rpx;">
					<label style="font-size: 28rpx;">合计：</label>
					<label style="color:red;font-size: 26rpx;">￥ {{Order.order_amount}}</label>
				</view>
			</view>
			<view class="w96 flex-end items-center" style="padding:20rpx 0rpx;">

			</view>
		</view>

		<view class="w96 radius20 bgwhite mt20">
			<view class="w94" style="padding:30rpx 0rpx;font-weight: bold;">
				订单信息
			</view>
			<view class="w94">
				<u-cell-group :border="false">
					<u-cell title="下单时间" :value="Order.add_time" center></u-cell>
					<u-cell title="支付时间" :value="Order.pay_time" center ></u-cell>
					<u-cell title="购买时长" :value="Order.time" center ></u-cell>
					<u-cell title="支付状态" :value="Order.pay_status_text" center :border="false"></u-cell>
				</u-cell-group>
			</view>
		</view>

		<view style="width:100%;height: 100rpx;"></view>

	</view>
</template>

<script>
	import $H from '@/common/js/request.js';
	export default {
		data() {
			return {
				id: '',
				Order: {},
				lawyer: {},
			}
		},
		onLoad(opt) {
			this.id = opt.id
			this.GetDetail()
		},
		methods: {
			async GetDetail() {
				try {
					const res = await $H.post('order/privatedetail', {
						id: this.id
					}, {
						token: true
					});
					this.Order = res.data;
					this.lawyer = res.data.lawyer;
				} catch (error) {
					// 处理错误
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.grid-text {
		font-size: 22rpx;
		margin-top: 12rpx;
		color: #000;
	}

	.bgwhite {
		background: #fff;
	}

	.flex-center {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.flex-between {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.flex-start {
		display: flex;
		justify-content: flex-start;
	}

	.items-center {
		align-items: center;
	}

	.flex-end {
		display: flex;
		justify-content: flex-end;
	}

	.mt20 {
		margin-top: 20rpx !important;
	}

	.radius20 {
		border-radius: 20rpx;
	}

	.w98 {
		width: 98%;
		margin: 0 auto;
	}

	.w96 {
		width: 90%;
		margin: 0 auto;
	}

	.w94 {
		width: 94%;
		margin: 0 auto;
	}
</style>